<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico" />
    	<link href="../../css/bootstrap.min14ed.css" rel="stylesheet" /> 
    <link href="../../css/font-awesome.min93e3.css" rel="stylesheet" />
    <link href="../../css/animate.min.css" rel="stylesheet" />
    <link href="../../css/style.min862f.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../css/custom.css" />
</head>
<body class="gray-bg">
	
		<div class="top-tool row white-bg" style="padding:0 15px;">
			<div class="pull-right" style="padding-top: 4px;">
				<button type="button" class="btn btn-default btn-sm" onclick="history.back();">返回</button>
				<a href="javascript:void(0)" class="btn btn-danger btn-sm" disabled="disabled">删除</a>
				<a href="javascript:location.reload()" class="btn btn-warning btn-sm"><i class="fa fa-refresh"></i> 刷新</a>
				<a href="javascript:void(0)" id="editOrder" class="btn btn-primary btn-sm animated">编辑订单</a>
			</div>
			<h4 style="line-height: 40px; padding-left: 10px;margin:0">订单号: <span class="text-success">20160600312401-213  </span> <span class="text-danger"><storng>已开工</storng></span></h4>
		</div>
		<div class=" wrapper wrapper-content animated fadeInRight ">
			<!--保存时的url-->
			<form action="">
		<div class="row ">
			<div class="col-xs-12 col-sm-6 col-lg-5">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>服务信息 </h5>
					</div>
					<div class="ibox-content">
						<table class="table table-hover">
							<thead>
								<tr>
									<th>服务ID</th>
									<th>服务名称+规格</th>
									<th>数量</th>
									<th>租赁时间/天数</th>
									<th>单价</th>
									<th>小计</th>
									<th class="editorder">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr data-gid="1">
									<td>1232</td>
									<td>
										<p>深圳玫瑰小镇</p>
										<p>套餐一</p>
									</td>
									<td>1</td>
									<td>
										<p>2017-06-01到2017-06-03</p>
										<p>共3天</p>
									</td>
									<td class="yes-edit">&yen; 2000.00</td>
									<td><span class="font-bold text-danger">&yen; 6000</span></td>
									<td class="editorder"><button type="button" class="btn btn-danger btn-xs">删除</button></td>
								</tr>
								<tr data-gid="2">
									<td>1232</td>
									<td>
										<p>深圳玫瑰小镇</p>
										<p>套餐一</p>
									</td>
									<td>1</td>
									<td>
										<p>2017-06-01到2017-06-03</p>
										<p>共3天</p>
									</td>
									<td class="yes-edit">&yen; 2000.00</td>
									<td><span class="font-bold text-danger">&yen; 6000</span></td>
									<td class="editorder"><button type="button" class="btn btn-danger btn-xs">删除</button></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-lg-5">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>客户信息</h5>
					</div>
					<div class="ibox-content">
						<table class="table table-hover table-bordered order-d">
							<tbody>
								<tr>
									<td>客户名称:</td>
									<td>CEO Mr tang</td>
								</tr>
								<tr>
									<td>联系电话:</td>
									<td>13699772411</td>
								</tr>
								<tr>
									<td colspan="2">服务地址</td>
								</tr>
								<tr class="yes-edit">
									<td>收货人:</td>
									<td>Donald Duck</td>
								</tr>
								<tr class="yes-edit">
									<td>联系方式:</td>
									<td>13699772412</td>
								</tr>
								<tr >
									<td>服务区域:</td>
									<td>广东省 深圳市 宝安区</td>
								</tr>
								<tr class="yes-edit">
									<td>服务地址:</td>
									<td> <span class="font-bold text-default">西乡流塘社区唐氏企业大厦</span></td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row no-edit">
			<div class="col-xs-12 col-sm-6 col-lg-5">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>费用详情</h5>
					</div>
					<div class="ibox-content">
						<table class="table table-hover table-bordered order-d">
							<tr>
								<td>订单总额:</td>
								<td>&yen; 4600</td>
							</tr>
							<tr>
								<td>运费:</td>
								<td><span class="text-info">-&yen; 12</span></td>
							</tr>
							<tr>
								<td>优惠金额: </td>
								<td>
									<p>100元优惠券: <span class="text-info">-&yen;100</span></p>
									<p>订单满3000减: <span class="text-info">-&yen;300</span></p>
								</td>
							</tr>
							<tr>
								<td>应付定金:</td>
								<td><span class="text-warning">&yen; 2000</span></td>
							</tr>
							<tr>
								<td>应付尾款:</td>
								<td><span class="text-warning">&yen; 2700</span></td>
							</tr>
							<tr>
								<td>合计:</td>
								<td><span class="font-bold text-danger" style="font-size: 20px;">&yen; 4700</span></td>
							</tr>
						</table>
					</div>
				</div>
			</div>	
			<div class="col-xs-12 col-sm-6 col-lg-5 ">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>订单操作</h5>
					</div>
					<div class="ibox-content">
						<!--
							表单嵌套,所以用ajax吧
						-->
						<div class="form-horizontal">
							<div class="form-group">
								<label class="control-label col-xs-3">当前状态:</label>
								<div class="col-sm-9">
									<span class="font-bold text-warning">已开工</span>
								</div>
							</div>
							<div class="form-group ">
								<label class="control-label col-xs-3">操作类型:</label>
								<div class="col-sm-9">
									<select name="" class="form-control col-xs-9" id="handleType">
										<option value="0">请选择</option>
										<option value="1" disabled="disabled">付订金</option>
										<option value="2" >付尾款</option>
										<option value="3">付余款(注:一次付清)</option>
										<option value="4">代商家确定接单</option>
										<option value="5">代商家确定拒单</option>
										<option value="6">开工</option>
										<option value="7">完工</option>
										<option value="8">删除</option>
									</select>
								</div>
							</div>
							<div class="form-group ">
								<label class="control-label col-xs-3">操作备注:</label>
								<div class="col-xs-9">
									<textarea name="" id="handleRemark" placeholder="反正留个备注准没错"  class="form-control"></textarea>
								</div>
							</div>
							<div class="form-group">
								<div class="col-xs-9 col-xs-offset-3">
									<button type="button" class="btn btn-primary" id="handleSubmit">确定操作</button>									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row no-edit">
			<div class="col-xs-12 col-sm-6 col-lg-5">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>订单日志</h5>
					</div>
					<div class="ibox-content">
						<table class="table table-hover table-responsive table-striped">
							<tr>
								<td>2016-06-01 12:00:00</td>
								<td>下单,生成订单</td>
								<td></td>
							</tr>
							<tr>
								<td>2016-06-01 12:01:00</td>
								<td>支付订金</td>
								<td>&yen; 200</td>
							</tr>
							<tr>
								<td>2016-06-01 12:02:00</td>
								<td>修改了订单</td>
								<td>客服:小米米</td>
							</tr>
							<tr>
								<td>2016-06-01 12:02:00</td>
								<td>商家确认接单</td>
								<td></td>
							</tr>
							<tr>
								<td>2016-06-01 12:02:00</td>
								<td>支付尾款</td>
								<td>&yen; 400</td>
							</tr>
							<tr>
								<td>2016-06-01 12:02:00</td>
								<td>开工</td>
								<td></td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		</form>
		</div>
	</div>
	
<script src="../../js/jquery.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/content.min.js"></script>
<!--搜索提示-->
<script src="../../js/plugins/suggest/bootstrap-suggest.min.js"></script>
<!--日期-->
<script src="../../js/plugins/layer/laydate/laydate.js"></script>
<!--自定义-->
<script src="../../js/config.js"></script>

<script type="text/javascript">
	$(function(){
		//订单操作 
		$('#handleSubmit').click(function(){
			var type = $('#handleType').val(),
				remark = $('#handleRemark').val();
			if( type == 0 || !$.trim(remark) ){
				$.msg("请填写完整", 'error');
				return ;
			}
			$.ajax({
				url:'../../data.json',
				type:'post',
				data:{},
				dataType:'json'
			}).done(function(){
				console.log('ok')
			}).fail(function(){
				console.log('error');
			})
		});
		
		//编辑订单
		$('#editOrder').click(function(){
			var that = $(this);
			if( that.hasClass('active') ){
				//保存
				that.addClass('flipsmal');
				//商品处理
				$('.editorder').removeClass('showed');  
				//不参与编辑的模块
				$('.no-edit').removeClass('hided');
				that[0].addEventListener('animationend', function(){
					that.removeClass('flipsmal btn-danger active');
					that.text('编辑订单');
					that.addClass('btn-primary');
				});
				//input 处理
				$('.yes-edit').each(function(){
					var target = this.nodeName.toUpperCase();
					if( target === 'TD' ){
						$(this).html('&yen; '+$('input', this).val());
					}
					if( target === 'TR' ){
						//如果是tr,默认取第二个td更改;
						var otd = $('td', this).eq(1);
						otd.html( $('input', otd).val() );
					}
				});
				
			}else{
				//编辑
				that.addClass('flipsmal active');
				//商品处理
				$('.editorder').addClass('showed');  
				//不参与编辑的模块
				$('.no-edit').addClass('hided');
				//按钮处理
				that[0].addEventListener('animationend', function(){
					that.removeClass('flipsmal btn-primary');
					that.text('保存订单');
					that.addClass('btn-danger active');
				});
				
				//input 处理
				$('.yes-edit').each(function(){
					var target = this.nodeName.toUpperCase();
					if( target === 'TD' ){
						$(this).html('<input class="form-control" class="saveinput" value="'+($(this).text().split(' ')[1])+'" />')
					}
					if( target === 'TR' ){
						//如果是tr,默认取第二个td更改;
						var otd = $('td', this).eq(1);
						otd.html( '<input class="form-control" class="saveinput" value="'+(otd.text())+'" />' )
					}
					
				});
				$('.yes-edit input').eq(0).focus();
			}
		});
		
		
	});
	
	
</script>

</body>
</html>
